<!-- 使用说明：
<confirmModal
	v-if="confirmModal.show"
	:title="confirmModal.title"
	:content="confirmModal.content"
	:confirmText="confirmModal.confirmText"
	:cancelText="confirmModal.cancelText"
	:showCancelButton="confirmModal.showCancelButton"
	:confirmTextColor="confirmModal.confirmTextColor"
	:cancelTextColor="confirmModal.cancelTextColor"
	:confirmBgColor="confirmModal.confirmBgColor"
	:cancelBgColor="confirmModal.cancelBgColor"
	@getConfirmModal="getConfirmModal"
></confirmModal>

引入主题色
import themeColor from '@/const/theme';

绑定数据
confirmModal: {
	show: false,
	title: '提示',
	content: '是否确定退出当前账号？',
	confirmText: '是',
	cancelText: '否',
	showCancelButton: true,
	confirmTextColor: themeColor.themeColor.info,
	cancelTextColor: '',
	confirmBgColor: themeColor.themeColor.primary,
	cancelBgColor: themeColor.themeColor.info
}
			
打开弹窗
outLogin() {
	this.confirmModal.show = true;
},

接收参数
getConfirmModal(val) {
	this.confirmModal.show = false;
	if (val === 'confirm') {
		this.$Router.replaceAll({
			path: '/pages/sp-common/pages/login/index'
		});
	}
} -->

<template>
	<view>
		<u-overlay :show="show">
			<view class="box">
				<view class="title">{{ title }}</view>
				<view class="content">{{ content }}</view>
				<view class="btn">
					<view v-if="showCancelButton" @click="cancelBtn" :style="{ backgroundColor: cancelBgColor, color: cancelTextColor }" class="left">{{ cancelText }}</view>
					<view @click="confirmBtn" :style="{ backgroundColor: confirmBgColor, color: confirmTextColor }" class="right">{{ confirmText }}</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
	props: ['title', 'content', 'confirmText', 'cancelText', 'showCancelButton', 'confirmBgColor', 'cancelBgColor', 'confirmTextColor', 'cancelTextColor'],
	data() {
		return {
			show: true
		};
	},
	methods: {
		confirmBtn() {
			this.$emit('getConfirmModal', 'confirm');
		},
		cancelBtn() {
			this.$emit('getConfirmModal', 'cancel');
		}
	}
};
</script>
<style lang="scss" scoped>
.box {
	width: 600rpx;
	border-radius: 30rpx;
	background-color: white;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	.title {
		text-align: center;
		padding: 44rpx 0;
		box-sizing: border-box;
		font-weight: bold;
	}
	.content {
		text-align: center;
		padding: 34rpx 16rpx;
		padding-bottom: 74rpx;
		box-sizing: border-box;
	}
	.btn {
		display: flex;
		justify-content: space-around;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		box-sizing: border-box;
		font-weight: bold;
		.left {
			flex: 1;
			height: 100%;
		}
		.right {
			flex: 1;
			height: 100%;
		}
		:active {
			opacity: 0.5;
		}
	}
}
</style>
